<template>
  <q-dialog v-model="open" :full-width="false">
    <q-card :dark="dark" :style="{ width: width + 'px', minWidth: '350px', maxWidth: '80vw' }">
      <q-card-section class="row items-center q-pb-none">
        <div class="text-h6" dark>{{ title }}</div>
        <q-space />
        <q-btn icon="clear" flat round dense v-close-popup />
      </q-card-section>
      <slot></slot>
    </q-card>
  </q-dialog>
</template>

<script lang="ts">
import { defineComponent, nextTick, ref } from 'vue';
import { useEmitter } from 'src/emitter';

export default defineComponent({
  name: 'grid-modal',

  props: {
    id: {
      type: String,
      required: true,
    },
    width: {
      type: Number,
      default: 350,
    },
    dark: {
      type: Boolean,
      default: true,
    },
    title: {
      type: String,
      required: true,
    },
  },

  emits: ['open', 'close', 'select'],

  setup(props, emits) {
    const open = ref(false);

    useEmitter('modal', payload => {
      if (payload.id !== props.id) {
        return;
      }
      open.value = payload.isOpen;
      nextTick(() => {
        emits.emit('open', payload.value);
      });
    });

    return { open };
  },
});
</script>
